<template>
	<div>
		<div class="m-portlet__body">
			<div class="m-portlet_step">
				<div class="step-box">
					<span class="step-number"></span>
				</div>
			</div>
			<div class="step-boxs">
				<ul>
					<li>
						<div class="step-box_noe box_noe-hover">1</div>
						<div class="step-box_two"></div>
						<div class="step-box_three">代付款 (拍下商品)</div>
					</li>
					<li>
						<div class="step-box_noe">2</div>
						<div class="step-box_two"></div>
						<div class="step-box_three">代发货(买家付款)</div>
					</li>
					<li>
						<div class="step-box_noe">3</div>
						<div class="step-box_two"></div>
						<div class="step-box_three">待收货</div>
					</li>
					<li>
						<div class="step-box_noe">4</div>
						<div class="step-box_two"></div>
						<div class="step-box_three">待评价</div>
					</li>
					<li>
						<div class="step-box_noe">5</div>
						<div class="step-box_two"></div>
						<div class="step-box_three">完成(已评价、关闭、取消)</div>
					</li>
				</ul>
			</div>
			<div class="m-alert">
				<div class="m-alert_i"><i class="el-icon-warning"></i></div>
				<div class="m-alert_title">
					<span class="m-alert_span">{{$api.enumText('OrderStatus',viewModel.order.orderStatus)}}</span>您可以进行如下操作
				</div>
				<div class="m-alert_right">
					<div class="m-alert_a" :class="item.color" v-for="(item,index) in viewModel.methods" :key="index" @click="showFormDialog(item)">{{item.name}}</div>
				</div>
			</div>
		</div>
		<div class="interlayer"></div>
		<div class="user-right">
			<el-tabs>
				<el-tab-pane>
					<span slot="label" class="tab-pane-span"><i class="flaticon-analytics"></i>商品信息</span>
					<div class="tab-pane-box">
						<right-product :viewModel="viewModel"></right-product>
					</div>
				</el-tab-pane>
				<el-tab-pane>
					<span slot="label" class="tab-pane-span"><i class="flaticon-diagram"></i>操作记录</span>
					<div class="tab-pane-box">
						<right-record :viewModel="orderActionRecord"></right-record>
					</div>
				</el-tab-pane>
				<el-tab-pane>
					<span slot="label" class="tab-pane-span"><i class="flaticon-alarm"></i>发货记录</span>
					<div class="tab-pane-box">
						<div class="tab-pane-imgBox">
							<img src="../../../../../static/img/zwsj.png" />
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane>
					<span slot="label" class="tab-pane-span"><i class="flaticon-exclamation"></i>支付信息</span>
					<div class="tab-pane-box">
						<right-pay :viewModel="viewModel"></right-pay>
					</div>
				</el-tab-pane>
				<el-tab-pane>
					<span slot="label" class="tab-pane-span"><i class="flaticon-medical"></i>留言备注</span>
					<div class="tab-pane-box">
						<right-message :viewModel="viewModel"></right-message>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
		<el-dialog :title="methodDialogTitle" :visible.sync="methodDialogVisible" width="60%">
			<div class="order-dialog-loding">
				<from-item ref="from_item" @methodDialogSave="methodDialogSave" v-if="methodDialogTitle!='查看物流'"></from-item>
				<admin-auto-time class="order-edit_time" ref="admin_auto_time" :id="viewModel.id" v-else></admin-auto-time>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import rightProduct from './right/right-product'
	import rightPay from './right/right-pay'
	import rightMessage from './right/right-message'
	import rightRecord from './right/right-record'
	import fromItem from './right/right-from-item'
	import ala from 'ala'
	export default {
		props: {
			viewModel: {}
		},
		components: {
			rightProduct,
			rightPay,
			rightMessage,
			rightRecord,
			fromItem
		},
		data() {
			return {
				methodDialogVisible: false, // 是否显示弹出窗口
				methodDialogTitle: '', // 是否显示弹出窗口标题
				orderActionRecord: {} // 订单操作记录
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				var par = {
					orderId: this.viewModel.id
				}
				this.orderActionRecord = await this.$ala.httpGet('api/orderaction/GetOrderActionRecord', par)
			},
			async showFormDialog(method) {
				this.methodDialogVisible = true
				this.methodDialogTitle = method.name
				if (this.methodDialogTitle === '查看物流') {
					this.$nextTick(function () {
						this.$refs.admin_auto_time.init(this.viewModel.id, 'OrderSearchExpress')
					})
				} else {
					this.$nextTick(function () {
						this.$refs.from_item.init(method.autoFormType, this.viewModel.id)
					})
				}
			},
			methodDialogSave() {
				this.methodDialogVisible = false
				this.init()
				this.$message({
					message: '保存成功',
					type: 'success'
				})
				this.init()
				this.$emit('initChang')
			}
		}
	}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	@import "../styles/style.scss";
</style>